import React, { Component } from "react";
import * as echarts from "echarts";
export class WaterAndElectricity extends Component {
  componentDidMount() {
    this.renderChart();
  }
  renderChart() {
    const chartContainer = document.getElementById("barChart");
    const myChart = echarts.init(chartContainer);
    const option = {
      legend: {
        icon: "circle",
        textStyle: {
          color: "#fff",
        },
      },
      tooltip: {},
      dataset: {
        dimensions: [
          "product",
          "教学用水",
          "安防设备用电",
          "生态用水",
          "生活用电",
        ],
        source: [
          {
            product: "七月",
            教学用水: 1150,
            安防设备用电: 1560,
            生态用水: 1650,
            生活用电: 1530,
          },
          {
            product: "八月",
            教学用水: 1530,
            安防设备用电: 1650,
            生态用水: 1530,
            生活用电: 1530,
          },
        ],
      },
      xAxis: { type: "category" },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        { type: "bar" },
        { type: "bar" },
        { type: "bar" },
        { type: "bar" },
      ],
    };
    myChart.setOption(option);
  }
  render() {
    return <div id="barChart"></div>;
  }
}

export default WaterAndElectricity;
